<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>
	<view class="">
		<view class="topBox">
			<view class="status_bar"></view>
			<uni-nav-bar
				style="width: 750rpx; height: 44px; border-bottom: 1px solid #F2F2F2;"
				color="#9F9F9F"
				:border="false"
				:shadow="false"
				background-color="#F1F1F1"
				@clickLeft="gaoback"
			>
				<view class="titleImg"><image style="width: 100%; height: 100%;" mode="scaleToFill" src="/static/icon/logo_ctw@3x.png"></image></view>
				<view slot="left">
					<view class="leftIconBox"><uni-icons type="arrowleft" color="#000" size="18"></uni-icons></view>
				</view>
				<!-- <view slot="right"><uni-icons type="bars" color="#9F9F9F" size="28"></uni-icons></view> -->
			</uni-nav-bar>
		</view>
		<view class="zhuti" :style="{ marginTop: topBar }">
			<view class="SaoMaoBox">
				<view style="font-size: 18px; padding-left: 10px;">单号</view>
				<view class="topBoxSaoMao">
					<uni-easyinput trim="all" disabled class="inputBox" :inputBorder="false" v-model="value" placeholder="请输入内容"></uni-easyinput>
					<uni-icons style="padding: 0 10px;" @tap="saoMa" type="scan" color="#ddd" size="30"></uni-icons>
				</view>
				<view style="font-size: 18px; padding-left: 10px; margin-top: 10px;">签收人</view>
				<view class="topBoxSaoMao"><uni-easyinput trim="all" disabled class="inputBox" :inputBorder="false" v-model="value" placeholder="请输入内容"></uni-easyinput></view>
			</view>
			<view class="handwritingBox">
				<view class="">手写签名</view>
				<view class="handwritingBoxBtn">
					<button class="handwritingBoxBtn1" size="mini" @tap="handleConfirm">保存签名</button>
					<button class="handwritingBoxBtn1" size="mini" @tap="handleReset">清空</button>
				</view>
			</view>
			<view class="sign-box">
				<canvas class="mycanvas" canvas-id="mycanvas" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend"></canvas>
				<image @tap="yulanImgBtn" v-show="upImg" class="yulanImg" :src="upImg" mode=""></image>
			</view>
		</view>
		<view class="bottomSub">提交上传</view>
	</view>
</template>

<script>
import baseFont from '@/utils/baseFont.js';
import { picturUp } from '@/utils/pictureUp.js';
import saoma from '@/utils/soama.js';
// import { getStorage } from '@/utils/setStorage.js';
var x = 20;
var y = 20;
var tempPoint = []; //用来存放当前画纸上的轨迹点，用来判断当前是否签名了
var id = 0;
var type = '';
let that;
export default {
	extends: baseFont,
	data: function() {
		return {
			topBarHeight: 0, // 导航栏高度
			value: '',
			ctx: '', //绘图图像
			points: [], //路径点集合
			upImg: ''
		};
	},
	onLoad(option) {
		const { result } = option;
		if (result) {
			this.value = result;
		}
		// 拦截物理返回键
		this.goBackBox();
	},
	onUnload() {
		uni.$off('goBack_k', this.goBackBox2);
	},
	onShow() {
		this.ctx = uni.createCanvasContext('mycanvas', this); //创建绘图对象
		//设置画笔样式
		this.ctx.lineWidth = 2;
		this.ctx.lineCap = 'round';
		this.ctx.lineJoin = 'round';
	},
	created() {
		const that = this;
		uni.getSystemInfo({
			success(res) {
				that.topBarHeight = res.statusBarHeight;
			}
		});
	},
	mounted() {},
	computed: {
		topBar() {
			let num = 0;
			num = this.topBarHeight + 64; // 44是顶部高度
			return num + 'px';
		},
		i18n() {
			return this.$t('login');
		}
	},
	methods: {
		// 回退
		gaoback() {
			// #ifdef APP-PLUS
			uni.redirectTo({
				url: `/pages/home/index`
			});
			// #endif
			// #ifdef H5
			this.$Router.push(`/pages/home/index`);
			// #endif
		},
		goBackBox() {
			// const that = this;
			uni.$on('goBack_k', this.goBackBox2);
		},
		goBackBox2(data) {
			if (data) {
				this.gaoback();
			}
		},
		saoMa() {
			saoma(res => {
				console.log(res);
				this.value = res.result;
			});
		},
		//触摸开始，获取到起点
		touchstart: function(e) {
			let startX = e.changedTouches[0].x;
			let startY = e.changedTouches[0].y;
			let startPoint = {
				X: startX,
				Y: startY
			};
			/* **************************************************
						    #由于uni对canvas的实现有所不同，这里需要把起点存起来
						 * **************************************************/
			this.points.push(startPoint);
			//每次触摸开始，开启新的路径
			this.ctx.beginPath();
		},
		//触摸移动，获取到路径点
		touchmove: function(e) {
			let moveX = e.changedTouches[0].x;
			let moveY = e.changedTouches[0].y;
			let movePoint = {
				X: moveX,
				Y: moveY
			};
			this.points.push(movePoint); //存点
			let len = this.points.length;
			if (len >= 2) {
				this.draw(); //绘制路径
			}
			tempPoint.push(movePoint);
		},
		// 触摸结束，将未绘制的点清空防止对后续路径产生干扰
		touchend: function() {
			this.points = [];
		},
		/* ***********************************************
			#   绘制笔迹
			#   1.为保证笔迹实时显示，必须在移动的同时绘制笔迹
			#   2.为保证笔迹连续，每次从路径集合中区两个点作为起点（moveTo）和终点(lineTo)
			#   3.将上一次的终点作为下一次绘制的起点（即清除第一个点）
		************************************************ */
		draw: function() {
			let point1 = this.points[0];
			let point2 = this.points[1];
			this.points.shift();
			this.ctx.moveTo(point1.X, point1.Y);
			this.ctx.lineTo(point2.X, point2.Y);
			this.ctx.stroke();
			this.ctx.draw(true);
		},
		//清空画布
		handleReset: function() {
			const that = this;
			uni.getSystemInfo({
				success: function(res) {
					let canvasw = res.windowWidth;
					let canvash = res.windowHeight;
					that.ctx.clearRect(0, 0, canvasw, canvash);
					that.ctx.draw(true);
				}
			});
			tempPoint = [];
			this.upImg = '';
		},
		//将签名笔迹存到本地
		handleConfirm: function() {
			if (tempPoint.length == 0) {
				uni.showToast({
					title: '请先签名',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			const that = this;
			uni.canvasToTempFilePath({
				canvasId: 'mycanvas',
				fileType: 'jpg',
				success: async function(res) {
					let tempPath = res.tempFilePath;
					//这里主要是根据实际需求要将笔迹旋转一定角度，再保存下来
					const imgUrl = await picturUp('api/order/upload/checklist', tempPath, '');
					that.upImg = imgUrl[0];
					uni.previewImage({
						urls: imgUrl,
					});
					// uni.compressImage({
					// 	src: tempPath,
					// 	quality: 100,
					// 	rotate: 270,
					// 	success: function(result) {
					// 		console.log(result);
					// 	}
					// });
				},
				fail: function(err) {
					uni.showToast({
						title: '上传失败',
						icon: 'none',
						duration: 2000
					});
				}
			});
		},
		// 预览签名
		yulanImgBtn() {
			uni.previewImage({
				urls: [this.upImg],
			});
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .is-disabled {
	background-color: #fff !important;
}
::v-deep .uni-easyinput__content-input {
	line-height: 35px;
	font-size: 18px;
}

::v-deep .uni-easyinput__content {
	border-bottom: 1px solid #ddd;
}
.titleImg {
	width: 60px;
	height: 30px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
}
.leftIconBox {
	width: 25px;
	height: 25px;
	background-color: #fff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 15px;
}
.topBox {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	// 顶部部分
	.status_bar {
		height: var(--status-bar-height);
		background-color: #f1f1f1;
		width: 100%;
	}
}
.zhuti {
	padding: 0 10px;
	.SaoMaoBox {
		.topBoxSaoMao {
			display: flex;
			justify-content: space-between;
			align-items: center;
			.inputBox {
				background-color: pink;
				height: 35px;
				line-height: 35px;
			}
		}
	}
	.handwritingBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 16px;
		padding: 20px 0 10px 0;
		.handwritingBoxBtn {
			display: flex;
			.handwritingBoxBtn1 {
				background-color: #CD001B;
				padding: 0 18px;
				margin-right: 0px;
				border-radius: 5px;
				color: #ffffff;
				margin-left: 20px;
			}
		}
	}
	.sign-box {
		width: 100%;
		height: 800rpx;
		margin: auto;
		border: 1px solid #ddd;
		position: relative;
		.mycanvas {
			width: 100%;
			height: 100%;
			background-color: #ececec;
		}
		.yulanImg {
			position: absolute;
			width: 60px;
			height: 60px;
			left: 0;
			bottom: 0;
		}
	}
}
.bottomSub {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 60px;
	line-height: 60px;
	text-align: center;
	font-size: 18px;
	background-color: #CD001B;
	color: #fff;
}
</style>
